let available = 20;
let best = 0;
let number = Math.trunc(Math.random() * 20) + 1;
console.log(number);
document.querySelector(".check").addEventListener("click", function () {
  const guess = Number(document.querySelector(".guess").value);
  if (!guess) {
    document.querySelector(".message").textContent = "please enter a number";
  } else if (guess < 1 || guess > 20) {
    document.querySelector(".message").textContent = "illegal number!";
  } else if (guess < number) {
    document.querySelector(".message").textContent = "TOO LOW!";
    available--;
  } else if (guess > number) {
    document.querySelector(".message").textContent = "TOO HIGH!";
    available--;
  } else {
    document.querySelector(".message").textContent = "PERFECT!";
    available--;
    document.querySelector("body").style.backgroundColor = "#60b347";
    document.querySelector(".again").style.display = "block";
    document.querySelector(".check").style.display = "none";
    document.querySelector(".guessNumber").textContent = number;
    document.querySelector(".guessNumber").style.width = "30rem";
    if (best < available)
      document.querySelector(".best").textContent = "🥇 Highscore:" + available;
  }
  document.querySelector(".available").textContent =
    "💯 Available check:" + available;
  if (available === 0) {
    document.querySelector(".message").textContent = "YOU LOSE!";
    document.querySelector(".again").style.display = "block";
    document.querySelector(".check").style.display = "none";
    document.querySelector("body").style.backgroundColor = "red";
    document.querySelector(".guessNumber").textContent = number;
    document.querySelector(".guessNumber").style.width = "30rem";
  }
});

document.querySelector(".again").addEventListener("click", function () {
  document.querySelector("body").style.backgroundColor = "#222";
  document.querySelector(".again").style.display = "none";
  document.querySelector(".check").style.display = "block";
  document.querySelector(".available").textContent = "💯 Available check:20";
  available = 20;
  number = Math.trunc(Math.random() * 20) + 1;
  document.querySelector(".guess").value = "";
  document.querySelector(".guessNumber").textContent = "?";
  document.querySelector(".guessNumber").style.width = "15rem";
});
